<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/system/roleList' }">角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色权限分配</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 无权限显示 -->
    <div class="mainContainer" v-show="permissions">
      <div class="error-page">
        <img src="../../assets/images/no-power.png" />
        <p>抱歉！您当前无权限访问此页面</p>
      </div>
    </div>
    <!-- 有权限显示 -->
    <div class="page-main-info" v-show="hasPermissions">
      <div class="mainContainer editRolePage">
        <div class="user-file-image role-user">
          <div class="block-fx">
            <el-image style="width: 80px; height: 80px;border-radius:50%;overflow:hidden;">
              <!-- 默认图片 -->
              <div slot="error" class="image-slot">
                <img width="80" src="../../assets/images/default-user-img.png" />
              </div>
            </el-image>
          </div>
          <div class="block-fx user-info">
            <h1>{{role.name}}</h1>
            <p>{{role.description}}</p>
          </div>
        </div>
      </div>
      <div class="mainContainer m-t20">
        <!-- 权限 -->
        <div class="role-main clearfix">
          <div class="role-box role-block">
            <div class="role-title">菜单权限</div>
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="menuIds"
              :props="defaultProps"
              ref="tree"
            ></el-tree>
          </div>
          <div class="role-box role-block">
            <div class="role-title">页面及操作权限</div>
            <el-tree
              :data="data2"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="rolePages"
              :props="defaultProps"
              ref="page"
            ></el-tree>
          </div>
        </div>
        <!-- 权限结束 -->
      </div>

      <div class="page-form-btn">
        <el-button>取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "editRole",
  data() {
    return {
      // 权限
      role:{},
      permissions: false,
      hasPermissions: true,
      // 菜单
      data: [
        {
          id: 1,
          label: "参保地",
          children: [
            {
              id: 2,
              label: "参保地"
            }
          ]
        },
        {
          id: 3,
          label: "方案管理",
          children: [
            {
              id: 4,
              label: "社保方案"
            },
            {
              id: 5,
              label: "社保补缴规则"
            },
            {
              id: 6,
              label: "公积金方案"
            },
            {
              id: 7,
              label: "公积金补缴规则"
            },
            {
              id: 8,
              label: "残保金"
            }
          ]
        },
        {
          id: 9,
          label: "服务公司",
          children: [
            {
              id: 10,
              label: "服务公司"
            }
          ]
        },
        {
          id: 11,
          label: "商保方案",
          children: [
            {
              id: 12,
              label: "商保方案"
            }
          ]
        },
        {
          id: 13,
          label: "系统",
          children: [
            {
              id: 14,
              label: "员工管理"
            },
            {
              id: 15,
              label: "角色管理"
            }
            ,
            {
              id: 16,
              label: "审批管理"
            }
          ]
        }
      ],
      // 页面操作
      data2: [
        {
          id: 1,
          label: "页面1",
          children: [
            {
              id: 2,
              label: "添加"
            },
            {
              id: 3,
              label: "查看"
            },
            {
              id: 4,
              label: "删除"
            }
          ]
        },
        {
          id: 5,
          label: "页面222",
          children: [
            {
              id: 6,
              label: "添加"
            },
            {
              id: 7,
              label: "查看"
            },
            {
              id: 8,
              label: "删除"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "menuName"
      },
      menuIds:[],
      rolePages:[]
    };
  },
  created(){
    this.getRole();
    this.getMenuIds();
    this.getPages();
    this.getPageIds();
    this.getRoleDetail();
  },
  methods: {
    getMenuIds(){
      Http.api.get("/role/"+this.$route.query.id+"/menus").then(res => {
        this.menuIds = res.data.ids;
        console.log(this.menuIds);
      });
    },
    getPageIds(){
      Http.api.get("/role/"+this.$route.query.id+"/pages").then(res => {
        this.rolePages = res.data.ids;
      });
    },
    getRole() {
      Http.api.get("/role/tree").then(res => {
        this.data = res.data.children;
      });
    },
    getRoleDetail() {
      Http.api.get("/role/"+this.$route.query.id).then(res => {
        this.role = res.data;
      });
    },
    getPages() {
      Http.api.get("/role/pages").then(res => {
        this.data2 = res.data;
      });
    },
    // 保存
    save() {
       this.saveRoleMenu();
       this.saveRolePage();
      this.$message.success('数据保存成功');
      this.$router.push({path:"/system/roleList"});
    },
    saveRoleMenu(){
      let l = this.$refs.tree.getCheckedNodes();
      let ids = new Array();
      l.forEach((item)=>{
        ids.push(item.id);
      })
      Http.api.post('role/'+this.$route.query.id+"/permission?type=0",{ids:ids})
    },
    saveRolePage(){
      let l = this.$refs.page.getCheckedNodes();
      let ids = new Array();
      l.forEach((item)=>{
        ids.push(item.id);
      })
      Http.api.post('role/'+this.$route.query.id+"/permission?type=1",{ids:ids})
    }
  }
};
</script>
